Hoạt ảnh Sprite (Sprite Animation)

Vẽ hình ảnh và tạo hoạt ảnh sprite trên HTML5 Canvas.

Nạp và vẽ hình ảnh

Để vẽ hình ảnh lên canvas, trước tiên ta tạo đối tượng Image và gán sự kiện onload:

let img = new Image();
img.src = 'resources/player.png';
img.onload = function() {
    context.drawImage(img, 0, 0);
};

Vẽ Hoạt ảnh Sprite Sheet

Một Sprite Sheet chứa nhiều khung hình hoạt ảnh xếp liền kề nhau. Ta cắt từng khung hình bằng hàm drawImage() mở rộng:

// drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
context.drawImage(
    spriteSheet,
    frameX * frameWidth,  // Tọa độ X trên sprite sheet
    frameY * frameHeight, // Tọa độ Y trên sprite sheet
    frameWidth,
    frameHeight,
    posX,                 // Tọa độ X vẽ lên canvas
    posY,                 // Tọa độ Y vẽ lên canvas
    frameWidth,
    frameHeight
);

Chuyển đổi frameX liên tục theo thời gian sẽ tạo nên hoạt ảnh nhân vật chạy, nhảy hoặc tấn công sinh động.